﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>提速</title>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> 
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache"> 
<META HTTP-EQUIV="Expires" CONTENT="0"> 
<link rel="stylesheet" type="text/css" href="com.atilax.frmwk/font-awesome-4.5.0/css/font-awesome.css">
<script src="jquery-1.11.3.js"></script>
<script src="com.attilax/ui/orderArrow.js"></script>
<!-- pagging-->
  <link rel="stylesheet" type="text/css" href="easyui1.5/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui1.5/themes/icon.css">
   <script src="layer/layer.js"></script>
    <script src="easyui1.5/jquery.easyui.min.js"></script>
	<script src="paggingCoreV3r44.js"></script>
   <!-- pagging end--> 
    <script src="api_cfg.js"></script>
    <script src="js/math.js"></script>
     <script src="tisu.js"></script>
 
</head>

<body>

<script src="vue.js"></script>
<script src="jquery.table2excel.js"></script>

<p>
  <label for="textfield">流程名称:</label>
  <input type="text" name="textfield" id="textfield">
  <label for="textfield2">时间:</label>
  <input type="date" name="textfield2" id="starttime">
  -
   <input type="date" name="textfield2" id="endtime">
  <input type="button" name="button" id="button11" value="搜索">
  <input type="button" name="button" id="button" value="导出excel" onClick="btn()">
</p>
<table width="100%" border="0" id="table1">
  <tbody>
    <tr bgcolor="#CBC6C6">
      <td>序号</td>
      <td width="308">流程名称</td>
      <td>数量
       <span id="count_orderby">
      
        <i class="fa fa-chevron-circle-up fa-lg"></i>
        <i class="fa fa-chevron-circle-down fa-lg " style="display:none"></i>
        </span>
      </td>	
      <td style="display:none">平均时间（天）</td>
      <td>平均时间(小时)
      <span id="avgtimeArrow">
      
        <i class="fa fa-chevron-circle-up fa-lg"></i>
        <i class="fa fa-chevron-circle-down fa-lg " style="display:none"></i>
        </span>
      </td>
	  <td>标准时间</td>
	  <td>上月周期(小时)</td>
	  <td>上月提速率
        <span id="avgtimeArrow_premonth">
      
        <i class="fa fa-chevron-circle-up fa-lg"></i>
        <i class="fa fa-chevron-circle-down fa-lg" style="display:none"></i>
        </span>
      </td>
	  <td>前三月周期</td>
	  <td>前三月提速率
        <span id="avgtimeArrow_pre3month">
      
        <i class="fa fa-chevron-circle-up fa-lg"></i>
        <i class="fa fa-chevron-circle-down fa-lg" style="display:none"></i>
        </span>
      </td>
	  <td>备注</td>
    </tr>
    <tr v-for="(dataItem,index) in list_data1">
	  <td>{{index+1}}</td>
      <td><span class="hide">{{dataItem.流程名}}</span>
	  <!--  流程id,， 总数量 延迟数量  延迟天数  -->
	  </td>
      <td>{{dataItem.总数量}} </td>
	  <td style="display:none">{{dataItem.平均时间}}天 </td>
	  <td>{{toWorktime(dataItem.平均时间)}}小时</td>
	  <td>
      
      {{dataItem.标准时间}}
      小时</td>
	 
	  <td>{{toWorktime(dataItem.上个月平均执行时间)}}</td>
	  <td>{{dataItem.上月提速率}}%</td>
	  <td>{{toWorktime(dataItem.前三月平均时间!=null?dataItem.前三月平均时间:0)}}小时</td>
	  <td>{{dataItem.前三月提速率!=null?dataItem.前三月提速率:0}}%</td>
	  <td></td>
    </tr>
 
  </tbody>
</table>

<script>
 var alldata_r44=[{"tit":"id1","上个月平均执行时间":1},{"tit":"id2","上个月平均执行时间":9}];
console.log("---ini alldata r44:"+alldata_r44);
 function btn()
{
	$("#table1").table2excel({
	  // 不被导出的表格行的CSS class类
	  exclude: ".noExl",
	  // 导出的Excel文档的名称
	  name: "Excel Document Name",
	  // Excel文件的名称
	  filename: "数据导出"
	});
}
		  
//建立vue与表格的绑定关系，同时设置初始值为空[]
//el就是表格id
//list_data1是自定义的数据列表
var   VueObj1 =  new Vue({
          el: '#table1',
      	  data: {
            list_data1: []
          }
   });
   
   //获取数据，一般是从ajax从后端获取数据
 //  var  list_data2=[{用户名:"王一",备注:"管理员"},{用户名:"王二",备注:"普通用户"}];
  	//将数据绑定到table控件 
  //  VueObj1.$data.list_data1=list_data2;
	
	function page_load()
	{
		
		 window.setTimeout(function()
   {
	 
	 
	 console.log("log...");
	 
	 
	   },2000);
	
	var paramsql =	getSetTimeParamsSqlExp();
	
	console.log("---paramsql:"+paramsql);
	var s="select * from tisuv2 ";
	s=paramsql+";"+s+"";
	
console.log("--ini sql:"+s);
	//s="  update \"ez_flow_timeparam\" set \"starttime\"=to_timestamp('2016-08-15', 'yyyy-mm-dd') ;";
	//s=s+"select * from \"paraview\"  ";

	var url=api_url+"/api?m=qm&p1="+encodeURIComponent(encodeURIComponent(s));
	// mode: "no-cors",
	/*\
	\headers: {
						'Accept': 'application/json',
						'Content-Type': 'application/json'
					},
	*/
	var fetchOption={  
						method:"POST",
					
					body: JSON.stringify({						 
						pageIndex:0
					  })
	
	};
	
	////convert to json object
	
	fetch(url).then(response =>		response.json())
  .then(data => {
	console.log("---line1:");
	console.log("---data:"+data);
	console.log("---line2:");
	//VueObj1.$data.list_data1=data;
		data=data[1];
		alldata_r44=data;
		console.log("---ajax data 2 alldata r44:"+alldata_r44);
		setPageControl(data);
		iniOrderFun();
	}
  )
  .catch(e => console.log("Oops, error", e));
		
	}
  
  usetestdata=false;
 
  
  $(function(){
	  
	   if(usetestdata)
	{
		alldata_r44=testdata2;
		console.log("---ajax data 2 alldata r44:"+alldata_r44);
		setPageControl(alldata_r44);
		iniOrderFun();
	}else
	  page_load();// ini data list
	  
	  
	
	$("#button11").on('click',function(){
	var paramsql=	getSetTimeParamsSqlExp();
	console.log("---paramsql:"+paramsql);
			var index = layer.load(2, {
			shade: [0.1,'#fff'] //0.1透明度的白色背景
			});
		//	if(
			var s2 ="select * from \"提速lev4\" where 流程名 like '%"+$('#textfield').val()+"%'";
			s2=paramsql+";"+s2;
			//alert(s2);
			var url2 = api_url+"/api?m=qm&p1="+encodeURIComponent(encodeURIComponent(s2));
			fetch(url2).then(response=>response.json()).then(data => {
				data=data[1];
				alldata_r44=data;
				//page ,bing pageddata2 table..
				setPageControl(data);
				//VueObj1.$data.list_data1=data;\
				layer.close(index);
				iniOrderFun();
			}
			).catch(e => console.log("Oops, error", e));
		})
		
	})
  /*
	fetch(url,fetchOption).then(	function(response) {
			 
				console.log("------ret txt:"+response.json());
	})
  .then(function(data) {
			console.log(data);
})
  .catch(function(e) {
		console.log("Oops, error");
})
	*/
	/*
	$.get(url,function(data,status){
     console.log("Data: " + data + "\nStatus: " + status);
	  var    list_data2 = eval("(" + data + ")");  
	  
	  console.log("--tag2");
	  VueObj1.$data.list_data1=list_data2;
  });
  */


//avgtimeArrow_pre3month
function iniOrderFun()
{
orderArrow_ini("#avgtimeArrow",alldata_r44,"平均时间",function(arr_ordered){
	setPageControl(arr_ordered);});
orderArrow_ini("#avgtimeArrow_premonth",alldata_r44,"上月提速率",function(arr_ordered){
	setPageControl(arr_ordered);});
orderArrow_ini("#avgtimeArrow_pre3month",alldata_r44,"前三月提速率",function(arr_ordered){
	setPageControl(arr_ordered);  });
	
	orderArrow_ini("#count_orderby",alldata_r44,"数量",function(arr_ordered){
	setPageControl(arr_ordered); 
	 });
}

</script>
<!-- 翻页控件区域-->

 
		<div class="easyui-pagination" id="page_div" ></div>
	</div>
   <!--  绑定翻页查询数据事件-->

 
</body>
</html>
